<style>
.cont {
    padding: 5px 10px;
    background: #eaeaea;
    color: #333;
    float: left;
    height: auto;
    overflow: hidden;
}
.cont span {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;

}

</style>

<template>
    <div>
        <!-- <table-test :columns-list="columnsList"></table-test> -->
        <br>
        <div>
            <template v-for="(item, index) in selectData">
                <p :key="index" class="cont" >{{ item.name }} <span @click="deleteItem(index)">X</span></p>
            </template>
        </div>
        <Button type="ghost" @click="addModel">添加</Button>
        <test-module ref="testModule" :selectData="selectData" :test-model="testModelShow" @hideModel="hideModel" @selectFunction="selectFunction"></test-module>

        <Button type="ghost" @click="showModel">中药信息</Button>
        <show-module :herbalId="herbalId" :show-model="ModelShow" @hideDetailsModel="hideDetailsModel"></show-module>
    </div>
</template>
<script>
// import tableTest from './components/tabletest.vue';
import testModule from './components/layerModule.vue'
import showModule from '../../public/components/herbalcom/herbalDetail.vue'
export default {
    name: 'tablelxhTest',
    components: {
        /// tableTest,
        testModule,
        showModule
    },
    data () {
        return {
            testModelShow: false,
            ModelShow: false,
            herbalId: 1 ,
            columnsList: [],
            selectData: []
        }
    },
    methods: {
        hideModel (value) {
            this.testModelShow = false
        },
        hideDetailsModel (value) {
            this.ModelShow = false
        },
        selectFunction (value) {
            this.selectData = value
        },
        addModel () {
            this.testModelShow = true
        },
        showModel () {
            this.ModelShow = true
        },
        deleteItem (index) {
            this.$refs.testModule.init()
            console.log("******************执行删除操作****************")
            this.selectData.splice(index, 1)
        }
    }
}
</script>
